<template>
	<view class="my">
		<!-- 我的订单 -->
		<view class="my_order">
			<view class="my_order_box flex  flex--justify-content--space-around  my_head flex ">
				<image :src="userInfo.image" mode="" />
				<text class="amount">{{userInfo.coin}}币</text>
				<view style="flex: right;margin-top: 20px;">
					<text style="font-size:13px; margin-left: 38rpx;color: #595959;">金币用于订单交易。</text>
				</view>
			</view>
		</view>
		<view class="list my_order">
			<view v-for="item in price" :key="item.id" :class="['priceele',checked_index==item.id?'priceele_hover':'']"
				@click=" checked_index = item.id; ">
				<image src="/static/image/cbnew.png" class="bi-img" />{{item.coin}}
				<text style="float: right;">￥{{item.price}}</text>
			</view>
			<view style="clear:both;"></view>
		</view>
		<view class="pay_type">
			<image src="/static/image/weChatPay.png" mode="widthFix"
				style="width:30px;height:30px;position:relative;top:8px;" />

			<text style="padding-left: 20rpx;">微信</text>
			<view class="duihao iconfont icon-confirm-line"></view>
		</view>
		<view class="submitpay" @click="submit()">确认充值</view>
		<view class="detail" @tap="searchDetail()">钱包明细</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'my',
		data() {
			return {
				changeNickName: false,
				weixinNumber: '',
				codeImageData: '',
				myCode: '',
				userInfo: {},
				accountShow: false,
				price: [],
				checked_index: 0
			}
		},
		async created() {

		},

		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			} else {
				this.getUserInfo();
				this.getCoinPrice();
			}

		},
		methods: {
			searchDetail() {
				uni.navigateTo({
					url: "/pages/walletDetails/walletDetails"
				})
			},
			//充值支付
			async submit() {
				var pay_id = this.checked_index;
				var that = this;
				if (!pay_id) {
					uni.showToast({
						title: '未选择充值方式',
						icon: "none"
					})
					return;
				}

				console.log("唤醒充值方法哦~")
				this.officialAccountPay(this.checked_index)
				console.log(this.checked_index)
			},
			async officialAccountPay(pay_id) {
				var that = this
				var {
					data
				} = await this.$http('/appapi/member/recharge_official', {
					pay_id: pay_id
				});

				//		nonceStr: data.nonceStr,
				// 		package: data.package,
				// 		paySign: data.paySign,
				// 		signType: data.signType,
				// 		timeStamp: data.timeStamp,
				// 		appId: data.appId
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": data.appId, //公众号名称，由商户传入     
						"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": data.nonceStr,
						"package": data.package,
						"signType": "MD5", //微信签名方式：     
						"paySign": data.paySign //微信签名 
					},
					function(res) {
						console.log("支付结果")
						console.log(res)
						// 支付成功
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showToast({
								title: "支付成功",
								success: () => {
									setTimeout(() => {
										that.getUserInfo();
									}, 500);
								}
							})
						}
						// 支付过程中用户取消
						if (res.err_msg == "get_brand_wcpay_request:cancel") {
							uni.showToast({
								title: "支付已取消",
								icon:"none"
							})
						}
						// 支付失败
						if (res.err_msg == "get_brand_wcpay_request:fail") {
							uni.showToast({
								title: "支付失败",
								icon:'error'
							})
						}
						/**
						 * 其它
						 * 1、请检查预支付会话标识prepay_id是否已失效
						 * 2、请求的appid与下单接口的appid是否一致
						 * */
						if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {

						}
					});
				// WeixinJSBridge.invoke(
				// 	'getBrandWCPayRequest', {
				// 		nonceStr: data.nonceStr,
				// 		package: data.package,
				// 		paySign: data.paySign,
				// 		signType: data.signType,
				// 		timeStamp: data.timeStamp,
				// 		appId: data.appId
				// 	},
				// 	function(res) {
				// 		console.log("支付结果")
				// 		console.log(res)
				// 		uni.showToast({
				// 				title: "支付成功",
				// 				success: () => {
				// 					setTimeout(() => {
				// 						that.getUserInfo();
				// 					}, 500);
				// 				}
				// 			})
				// 	}
				// 	// ,function(res){
				// 	// 	console.log("支付结果")
				// 	// 	console.log(res)
				// 	// 	uni.showToast({
				// 	// 		title: "支付成功",
				// 	// 		success: () => {
				// 	// 			setTimeout(() => {
				// 	// 				that.getUserInfo();
				// 	// 			}, 500);
				// 	// 		}
				// 	// 	})
				// 	// }
				// })
			},
			async jumpAppletPay(pay_id) {
				const data = await this.$http('/appapi/member/create_pay_order', {
					token: uni.getStorageSync("token"),
					pay_id: pay_id
				});
				plus.share.getServices(
					res => {
						let sweixin = null;
						for (let i in res) {
							if (res[i].id == 'weixin') {
								sweixin = res[i];
							}
						}
						//唤醒微信小程序
						if (sweixin) {
							console.log("跳转方法里面")
							sweixin.launchMiniProgram({
								//sweixin.openEmbeddedMiniProgram({	
								id: 'gh_6e65ad9ec27c', //微信开放平台 --- 绑定的微信小程序的 --- 原始id
								type: 2, //小程序版本  0-正式版； 1-测试版； 2-体验版。
								path: '/pages/apppay/apppay?order_sn=' +
									order_sn //小程序的页面,用传的参数在小程序接值判断跳转指定页面
							}, (msg) => {
								console.log("这里是回调")
								console.log("SUCCESS: " + JSON.stringify(msg))
							}, (msg) => {
								console.log("这里是回调")
								console.log("ERROR: " + JSON.stringify(msg))
							});
						} else {
							uni.showModal({
								content: "未安装微信APP"
							})
						}
					}
				)
			},
			// 获取个人信息
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				console.log("--------------getUserInfo--------------");
				console.log(data);
				this.userInfo = data;
				this.identity = data.identity;
				console.log(this.identity);
			},
			//获取金币价格列表
			async getCoinPrice() {
				const {
					data
				} = await this.$http('/appapi/system/coinPrice');
				console.log("------------getCoinPrice------------");
				this.price = data;
			},
			// 一键复制
			oneKeyCopy() {
				let that = this
				uni.setClipboardData({
					data: this.wxCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.detail {
		margin-top: 16px;
		text-align: center;
		color: #595959;
	}

	.submitpay {
		margin-top: 20px;
		background: #FA97B4;
		color: #fff;
		text-align: center;
		height: 50px;
		line-height: 50px;
		border-radius: 25px;

	}

	.duihao {
		float: right;
		width: 20px;
		height: 20px;
		line-height: 20px;
		background: rgb(0, 176, 106);
		text-align: center;
		color: #fff;
		border-radius: 10px;
		margin-top: 10px;
	}

	.pay_type {
		background: #fff;
		margin-top: 16rpx;
		padding: 22rpx 35rpx 22rpx 35rpx;
	}

	.bi-img {
		width: 20px;
		height: 20px;
		// margin-top: 8px;
	}

	.list {
		position: relative;
		padding: 15px;
		height: 300px;
	}

	.priceele {
		width: 42%;
		position: relative;
		float: left;
		margin-left: 2%;
		color: #656363;
		height: 3rem;
		line-height: 3rem;
		padding: 7px;
		background: #F8FAFF;
		border-radius: 10px;
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.priceele_hover {
		background: #000;
		color: #fff;
	}

	.my .my_head .amount {
		font-size: 1.5rem;
		color: #595959;
		margin-top: 20px;
		margin-left: 10px;
		text-align: center;
	}

	.updateNameBtn {
		background-color: #000000;
		color: #E8E8E8;
		padding: 0rpx 15rpx;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		border-radius: 20rpx;
		border-left: 5rpx solid #4EFFCF;
		border-right: 5rpx solid #FF4E4E;
	}

	.my {
		height: 100%;
		background: #F8FAFF;
		padding: 12rpx 18rpx 0 18rpx;
		box-sizing: border-box;

		.my_head {
			height: 150rpx;
			background: #fff;
			padding: 0 20rpx;

			image {
				width: 136rpx;
				height: 136rpx;
				border-radius: 50%;
			}

			text {
				margin-left: 46rpx;
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.my_order {
			background: #fff;
			margin-top: 16rpx;
			padding: 22rpx 20rpx 22rpx 20rpx;

			.my_order_title {
				width: 186rpx;
				height: 46rpx;
				background: #000;
				line-height: 46rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}

			.my_order_box {
				margin-top: 20rpx;

				.my_order_box_list {
					text {
						font-size: 48rpx;
					}

					view {
						height: 44rpx;
						padding: 0 15rpx;
						line-height: 44rpx;
						text-align: center;
						background: #f8f8f8;
						font-size: 28rpx;
						margin-top: 38rpx;
					}
				}
			}
		}

		.my_box {
			width: 100%;

			.my_box_list {
				padding: 34rpx 46rpx;
				background: #fff;
				margin-top: 16rpx;
				position: relative;

				image {
					width: 82rpx;
					height: 82rpx;
				}

				.my_box_list_cen {
					flex: 1;
					padding-left: 48rpx;

					.my_box_list_cen_top {
						font-size: 32rpx;
						color: #2B3039;
					}

					.my_box_list_cen_bot {
						font-size: 20rpx;
						color: #D7D7D7;
					}
				}

				.my_box_list_btn {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}

				text {
					font-size: 28rpx;
					color: #BFBFBF;
				}
			}
		}

		.my_addWx {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 98rpx 70rpx 66rpx 70rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 -16rpx 288rpx -52rpx rgba(0, 0, 0, 0.50);
			border-radius: 50rpx 50rpx 0 0;

			.my_addWx_title {
				padding: 5rpx 82rpx;
				background: #000;
				font-size: 28rpx;
				color: #fff;
			}

			.my_addWx_desc {
				width: 530rpx;
				font-size: 24rpx;
				color: #7B7B7B;
				margin-top: 32rpx;
			}

			input {
				text-align: center;
				font-size: 28rpx;
				color: #0AAFB9;
				margin-top: 36rpx;
			}

			.my_addWx_code {
				width: 530rpx;
				height: 290rpx;
				background: #F7F7F7;
				border-radius: 20rpx;
				margin: 64rpx 0;

				text {
					font-size: 28rpx;
				}

				image {
					width: 260rpx;
					height: 260rpx;
				}
			}

			.my_addWx_foot {
				width: 100%;

				view {
					width: 300rpx;
					height: 89rpx;
					line-height: 89rpx;
					text-align: center;
					font-size: 36rpx;
					color: #fff;
					border-radius: 8rpx;
				}

				.my_addWx_foot_left {
					background: #000;
				}

				.my_addWx_foot_right {
					background: #0AAFB9;
				}
			}
		}

		.my_kf {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 86rpx 70rpx 68rpx 70rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 -16rpx 288rpx -52rpx rgba(0, 0, 0, 0.50);
			border-radius: 50rpx 50rpx 0 0;

			.my_kf_head {
				.my_kf_head_title {
					padding: 5rpx 32rpx;
					background: #000;
					font-size: 28rpx;
					color: #fff;
				}

				.my_kf_head_code {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 28rpx;
					color: #07ACB6;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
				}

				.my_kf_head_btn {
					width: 156rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					border: 1px solid #000;
					font-size: 28rpx;
					color: #242424;
				}
			}

			.my_kf_code {
				width: 100%;
				height: 474rpx;
				background: #F7F7F7;
				border-radius: 20rpx;
				margin-top: 48rpx;

				image {
					width: 400rpx;
					height: 400rpx;
				}
			}

			.my_kf_foot {
				width: 100%;
				margin-top: 66rpx;

				view {
					width: 300rpx;
					height: 89rpx;
					line-height: 89rpx;
					text-align: center;
					font-size: 36rpx;
					color: #fff;
					border-radius: 8rpx;
				}

				.my_kf_foot_left {
					background: #000;
				}

				.my_kf_foot_right {
					background: #0AAFB9;
				}
			}
		}
	}
</style>